import React from 'react'

type Top30Item = {
  time: string
  action: string
  skill: string
  target: string
  count: number
}

type Top30TableProps = {
  top30Count: { out: Top30Item[]; received: Top30Item[] }
}

type DamageTableProps = {
  title: string
  data: Top30Item[]
  rowClass: string
}

const DamageTable: React.FC<DamageTableProps> = ({ title, data, rowClass }) => (
  <div>
    <h3 className="mb-1 text-lg font-semibold">{title}</h3>
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white text-sm">
        <thead>
          <tr>
            <th className="py-1">时间</th>
            <th className="py-1">技能</th>
            <th className="py-1">目标</th>
            <th className="py-1">伤害</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index} className={index % 2 === 0 ? 'bg-white' : rowClass}>
              <td className="border px-2 py-1">{item.time}</td>
              <td className="border px-2 py-1">{item.skill}</td>
              <td className="border px-2 py-1">{item.target}</td>
              <td className="border px-2 py-1">
                {item.count.toLocaleString()}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
)

const Top30Table: React.FC<Top30TableProps> = ({ top30Count }) => {
  const hasOutData = top30Count.out.length > 0
  const hasReceivedData = top30Count.received.length > 0

  const containerClass =
    hasOutData && hasReceivedData ? 'grid-cols-2' : 'grid-cols-1 justify-center'

  return (
    <div className="mb-2 w-full max-w-4xl rounded-lg bg-white p-4 shadow-md">
      <div className={`grid ${containerClass} gap-2`}>
        {hasOutData && (
          <DamageTable
            title="输出最大伤害"
            data={top30Count.out}
            rowClass="bg-green-100"
          />
        )}
        {hasReceivedData && (
          <DamageTable
            title="承受最大伤害"
            data={top30Count.received}
            rowClass="bg-red-100"
          />
        )}
      </div>
    </div>
  )
}

export default Top30Table
